import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { TabBar, WingBlank } from 'antd-mobile';
import HomeGrid from '../components/Home/HomeGrid';
import HomeCarousel from '../components/Home/HomeCarousel';
import HomeButtonGrid from '../components/Home/HomeButtonGrid';
import MyIcon from '../components/Base/MyIcon';
import HomeSchool from '../components/Home/HomeSchool';
import HomeMe from '../components/Home/HomeMe';
import HomeModal from '../components/Home/HomeModal';
import { Helmet } from 'react-helmet';
import styles from './HomePage.less';
import { version } from '../utils/data';

class HomePage extends React.Component {

  componentDidMount() {
    this.props.dispatch({ type: 'vip/updateCache', payload: {selectValue: [2,0], value: ''}});
    this.props.dispatch({ type: 'task/fetch', payload: {} });
  }

  render() {
    const { tasks, home } = this.props;
    return (
      <div className={styles.tab}>
        <Helmet>
          <title>
            汇员帮
          </title>
          // IM通讯js库
          <script src="http://cdn.ronghub.com/RongIMLib-2.3.4.min.js" />
        </Helmet>

        <img className={styles["nw-iii"]} src={require("../assets/bnw.png")} alt="" onClick={() => {
          window.location.href = "http://wx.hy-bang.com/v3/";
        }}/>


        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          <TabBar.Item
            title="首页"
            key="首页"
            icon={<MyIcon type="home" size="md" />}
            selectedIcon={<MyIcon type="homeSelected" size="md" />}
            selected={home.selected === 'tab1' || !home.selected}
            onPress={() => {
              this.props.dispatch(routerRedux.push({
                pathname: '/',
                query: { selected: 'tab1' },
              }));
            }}
            data-seed="logId"
            style={{ paddingBottom: '60px' }}
          >

            <div style={{ backgroundColor: 'rgb(237,246,251)', marginBottom: 50 }}>
              <HomeModal />
              <HomeCarousel />
              <div>
                <WingBlank size="md" style={{ backgroundColor: 'rgb(237,246,250)', margin: 0 }}>
                  <div style={{ marginLeft: 10, padding: 8 }}>
                    <MyIcon
                      type="trips" color="#ff2828" size="xxs"
                      style={{ position: 'relative', top: 2, marginRight: 8 }}
                    />待跟进客户:<span
                      style={{ color: '#ff2828', marginLeft: 5 }}
                    > {tasks.total}</span> 人
                  </div>
                  <HomeGrid items={tasks} />
                </WingBlank>

                <div style={{ backgroundColor: 'white', padding: 8, marginTop: 15 }}>
                  <HomeButtonGrid />
                </div>
              </div>
            </div>
          </TabBar.Item>
          <TabBar.Item
            icon={<MyIcon type="school" size="md" />}
            selectedIcon={<MyIcon type="schoolSelected" size="md" />}
            title="汇员帮学院"
            key="汇员帮学院"
            selected={home.selected === 'tab2'}
            onPress={() => {
              this.props.dispatch(routerRedux.push({
                pathname: '/',
                query: { selected: 'tab2' },
              }));
            }}
          >
            <HomeSchool />
          </TabBar.Item>
          <TabBar.Item
            dot={!version.isClick()}
            icon={
              <MyIcon type="user" size="md" />
            }
            selectedIcon={
              <MyIcon type="userSelected" size="md" />
            }
            title="我的"
            key="我的"
            selected={home.selected === 'tab3'}
            onPress={() => {
              this.props.dispatch(routerRedux.push({
                pathname: '/',
                query: { selected: 'tab3' },
              }));
            }}
          >
            <HomeMe />
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

function mapStateToProps(state, props) {
  return { tasks: state.task, home: state.home };
}

export default connect(mapStateToProps)(HomePage);
